//添加商品
import { PlusOutlined } from '@ant-design/icons';
import myAxios from "../../../utils/myAixos"
import {
    Button,
    Modal,
    Form,
    Input,
    Radio,
    Upload,
    message,
    Select
} from 'antd';
import { useState } from 'react';
import { useNavigate } from "react-router-dom"
import './addpro.css'
const { TextArea } = Input;




const AddPro = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);//模态框状态
    const navigat = useNavigate()//返回使用
    const gouback = () => {
        navigat(-1)
    }

    //normFile 文件上传必备
    const normFile = (e) => {
        //  console.log('上传文件对象:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    //点击提交，弹框出现
    let [upvalues, setvalues] = useState()
    const onFinish = (values) => {
        //  console.log('表单 ', values);
        setIsModalOpen(true);
        setvalues(values)
    };

    const handleOk = () => {
        setIsModalOpen(false);
        //点击模态框确认，在这里发起请求
        let myformData = new FormData()
        myformData.append('p_introduce', upvalues.p_introduce)//商品介绍
        myformData.append('p_money', upvalues.p_money)//商品价格
        myformData.append('p_name', upvalues.p_name)//商品名称
        myformData.append('p_shoptype', upvalues.p_shoptype)//商品类型
        myformData.append('p_status', upvalues.p_status)//商品状态  上线下线
        //   myformData.append('p_status',upvalues.p_status)//商品类型
        myformData.append('myFile', upvalues.image[0].originFileObj)
        myAxios({
            url: "/shopAdd",
            method: "post",
            data: myformData

        }).then(res => {

            if (res.data.status === 200) {
                message.success('添加成功')
                navigat('/HomePage/ShopList')
            } else {
                //跳转到404页面 
            }

        })
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //渲染的内容
    return (
        <div>
            <header className='header1'>
                <div>
                    
                </div>
                <div onClick={gouback}>
                <Button block='true'>返回</Button>
                </div>
            </header>
            <section className='section1'>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                >
                    <Form.Item label="商品类型" name='p_shoptype'
                        rules={[{ required: true, message: '请选择商品类型!' }]}
                    >
                        <Radio.Group buttonStyle='solid'>
                            <Radio value="实物商品"> 实物商品 </Radio>
                            <Radio value="虚拟商品"> 虚拟商品 </Radio>
                            <Radio value="积分商品"> 积分商品 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="商品名称" name='p_name' rules={[{ required: true, message: '请输入商品名称!' }]}>
                        <Input placeholder='请输入商品名称' />
                    </Form.Item>
                    <Form.Item label="商品价格" name='p_money' rules={[{ required: true, message: '请输入商品价格!' }]}>
                        <Input placeholder='请输入价格' />
                    </Form.Item>
                    <Form.Item label="商品状态" name='p_status'>
                        <Select
                            defaultValue="上线"
                            style={{
                                width: 140,
                                marginLeft: 45
                            }}
                            options={[
                                {
                                    value: '上线',
                                    label: '上线',
                                },
                                {
                                    value: '下线',
                                    label: '下线',
                                },
                            ]}
                        />
                    </Form.Item>





                    <Form.Item label="商品介绍" name='p_introduce' rules={[{ required: true, message: '请填写商品介绍!' }]}>
                        <TextArea rows={8} />
                    </Form.Item>                                           {/* 获取上传文件的信息，必填 */}
                    <Form.Item label="商品图片" valuePropName="fileList"
                        getValueFromEvent={normFile} name='image'
                    >

                        <Upload action="/upload.do" listType="picture-card"  >
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>上传</div>
                            </div>
                        </Upload>


                    </Form.Item>

                    <Button type="primary" htmlType="submit" style={{ marginRight: 50 }}>完成，保存提交</Button>

                </Form>

            </section>


            <Modal title="提示"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                cancelText='否'
                okText='是'
                centered='true'
            >
                <p style={{ textAlign: 'center', height: '100px', fontSize: '18px', marginTop: '20px' }}>确认上传商品</p>
            </Modal>

        </div>
    );
};



export default AddPro;